<!DOCTYPE html>
<html>
<head>
	<title>{{ .item.Title }}</title>
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/public/css/style.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
</head>
<body>
	<div class="container">
		<header class="navbar">
			<section class="navbar-section">
				<a href="/" class="navbar-brand mr-2">Home</a>
			</section>
			<section class="navbar-section">
				<form method="GET" action="/">
					<div class="input-group input-inline">
						<input class="form-input" type="text" placeholder="search" name="keyword">
						<button type="submit" class="btn btn-primary input-group-btn"><i class="fa fa-search"></i></button>
					</div>
				</form>
			</section>
		</header>
	</div>
	
	
	<div class="container">
		{{ if .item.IsRoot }}
		<h2 class="">Media Directorys</h2>
		{{ else }}
		<h2 class="float-left">{{ .item.Title }} </h2>
		<div class="float-right">
			<ul class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="/preview?preview=1&id={{ .item.Pid }}">{{ .parent.Title }}</a>
				</li>
				<li class="breadcrumb-item">
					<a href="">{{ .item.Title }}</a>
				</li>
			</ul>
		</div>
		<div class="clearfix"></div>
		{{ end }}
		<div class="columns">
			{{ range .children }}
			<div class="column col-4">
				<div class="tile tile-centered bg-gray">
					<div class="tile-icon">
						<div class="example-tile-icon centered">
							{{ if .IsDir }}
							<i class="fa fa-folder-open-o centered"></i>
							{{ else if eq .MimeType ".mp4"}}
							<i class="fa fa-file-video-o centered"></i>
							{{ else }}
							<i class="fa fa-file-photo-o centered"></i>
							{{ end }}
						</div>
					</div>
					<div class="tile-content">
						<div class="tile-title"><a href="/preview?preview=1&id={{ .Id }}">{{  .Title }}</a></div>
						<small class="tile-subtitle text-gray">{{ if ne .IsDir true }} {{ .Size }} Mb {{ end }} {{ .ModAt }}</small>
					</div>
					<div class="tile-action">
						<div class="dropdown">
							<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
								<i class="fa fa-ellipsis-v"></i>
							</a>
							<!-- menu component -->
							<ul class="menu">
								<li class="menu-item">
									<a href="#">
										<i class="icon icon-link"></i> Slack
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
			{{ end }}
		</div>
		
	</div>
</body>
<script src="/public/js/vendor/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

</html>